<div class="main-container">
  <div class="welcome-sidebar">
    <a href="#introduction" class="welcome-button welcome-button-active">Introduction</a>
    <a href="#gameplay" class="welcome-button">Gameplay Overview</a>
  </div>
  <div id="welcome-introduction" class="welcome-section">
    <p class="welcome-banner">
      Welcome to Power<span class="fa fa-flash"></span>Lands!
    </p>
    <p>Our goal is simple: to provide you the best online economic game running in your browser, ever.</p>
    <p>Your goal is much more complex: raise your colony by gathering resources, constructing and improving facilities, inventing
      breakthrough technologies, and more. All in a multidimensional world of the future, where energy is ubiquitous.</p>
  </div>
  <div id="welcome-gameplay" class="welcome-section">
    <p class="welcome-banner">Gameplay</p>
  </div>
  <script type="text/javascript">
    $('#welcome-introduction').show();
  	require(['jquery'], function($) {
  	    $('.welcome-button').click(function(event) {
  	        var target = event.currentTarget;
  	        var id = target.hash.substring(1);
  	        var section = $('#welcome-' + id);
  	        if (section.length > 0) {
  	            $('.welcome-button').removeClass("welcome-button-active");
  	            $(target).addClass("welcome-button-active");
  	            $('.welcome-section').hide();
  	            section.show();
  	        }
  	    });
  	});
  </script>
</div>
